
<template>
  <div id="home">
  <!-- better内部不好做吸顶效果，多复制一份吸顶让另一个它到这儿时，这个消失 -->
     <tabControl
      :title="['流行', '精选', '新款']"
      @itemClick="itemClick"
      ref="tabControl1"
      class="tabControl"
      v-show="isFixed"
    ></tabControl>
    <homeNavBar></homeNavBar>
    <!--通过给组件绑定 ref来获取这个组件 ,:probeType="3"表示这个组件里使用这个scroll组件是否实时监听-->
   <homeScroll class="content"  ref="scroll"  :probeType="3" @scroll="contentScroll" :pullUpLoad="true"
     @pullingUp="loadMore">
    <home-swiper
      ref="hSwiper"
      :banners="banners"
      @swiperImgLoaded="swiperImgLoaded"
    ></home-swiper>
    <recommendView :recommends="recommends"></recommendView>
    <featureView />
    <tabControl
      :title="['流行', '精选', '新款']"
      @itemClick="itemClick"
      ref="tabControl2"
      :class="{fixed:isFixed}"
    ></tabControl>
    <goodsList :goods="goods[currentType].list" />
   </homeScroll>
   <!-- 本来是要在backTop组件内监听点击的，但是那样不好调用scroll里的点击回到顶部函数 ，
   故直接监听这个组件标签，只需要加.native就行了，详见下面代码-->
   <back-top @click.native="backClick" v-show="isShowBackTop" />
  </div>
</template>

<script>
import HomeNavBar from "./childcomps/HomeNavBar";
import HomeSwiper from "./childcomps/HomeSwiper";
import RecommendView from "./childcomps/RecommendView";
import FeatureView from "./childcomps/FeatureView";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import  BackTop  from '@/components/content/backTop/BackTop'
import HomeScroll from './childcomps/HomeScroll.vue'


import { getHomeMultidata } from "@/network/home";
import { getHomeGoods } from "@/network/home";
import { debounce} from '@/common/tools'

export default {
  name: "Home",
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: 'pop',
     isShowBackTop:false,
     tabControlOffsetTop:0,
     isFixed:false,
    };
  },
  components: {
    HomeNavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
   HomeScroll,
    BackTop,
  },
  created() {


    // 1.请求多个数据
    this.getHomeMultidata();
    // 2.请求商品数据
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");

  },
  mounted(){

  //  执行this.$refs.scroll.refresh函数，如果100ms之内该函数继续执行则等着不执行，
  // 直到这个函数超过100ms内还未执行时，把前面未执行的累计一起执行
    const refresh = debounce(this.$refs.scroll.refresh,100)
  //3.监听goodslistItem中图片加载完成
    this.$bus.$on('itemImgLoad',()=>{
  //  拿到scroll中刷新方法refresh(),当每一张图片加载完成就执行refresh()函数
  // this.$refs.scroll.refresh() 但是这样执行过于频繁不好，利用抖动/节流函数来刷新

      refresh()
      // refresh()是上面申明的refresh

    })

  },

  methods: {

    // 事件监听方法
    itemClick(index) {

      switch (index) {
        case 0:
          this.currentType = 'pop';
          break;
        case 1:
          this.currentType = 'new';
          break;
        case 2:
          this.currentType = 'sell';

      }
      this.$refs.tabControl1.currentIndex=index;
      this.$refs.tabControl2.currentIndex=index;
    },
// 回到顶部事件监听
     backClick(){
    //  通过ref拿到组件,第一个scroll是ref="scroll"中的，第二个是Scroll组件中的data里面的scroll属性，
    // 这个属性对于就是 new BScroll 对象，该对象中有scrollTo(x,y,time)方法，直接可以回到顶部，
    // 该方法三个属性值，x,y坐标和time是回到顶部的时间，注意scroll组件里必须是this.scroll
      this.$refs.scroll.scrollTo(0,0,600)
     },


//1.获取tabControl的offsetTop,所有组件都有$el属性，通过它可以拿到组件中的元素,元素又有offsetTop属性
    // 但是不能直接获取，直接在模板挂载即mounted中获取，可能图片没加载完，获取的值不准确，故要当HomeSwiper里
    // 的图片加载完了再获取才是正确的offsetTop值
    swiperImgLoaded(){
          this.tabControlOffsetTop = this.$refs.tabControl2.$el.offsetTop
     },



    //  通过scroll组件发射过来的滚动获取位置事件，监听这个事件，获取此时滚动的位置，判断是否显示回到顶部图标
    contentScroll(opsition){
      //  判断backTop和滚动的距离
         this.isShowBackTop=(-opsition.y)>1000

        //  判断滚动和tabControl的距离关系
         this.isFixed =(-opsition.y)>this.tabControlOffsetTop

    },



    // 上拉加载更多
       loadMore(){
        console.log('上拉加载更多...');
         this.getHomeGoods(this.currentType)
        //  图片加载慢，beeter-scroll,计算的高度是图片加载前的高度等图片加载完了就不重新加载了，故要
        // 调用这个函数重新计算可滚动高度
         this.$refs.scroll.scroll.refresh()
      },





    // 网络请求方法
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      let page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        // console.log(res.data.list);
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        // 加载完第一页调用，才能继续加载更多
         this.$refs.scroll.finishPullUp()
      });
    },

    // swiperLoaded() {

    // },
  },
};
</script>


<style scoped>
/* 使用better-scroll要给cotent设置高度 */
      /* #home{
      height: 100vh;
      } */
      /* 给滚动的容器设置高度有两种方式 */
        /* 第一种:*/
      /* .content{
      vh是视口高度或宽度
      height: calc(100%-93px);
      margin-top: 44px;
      background-color: rgb(223, 23, 23);
      overflow: hidden;
      } */
      /* 第二种定位 */
      #home{
      /* 必须有个高度 */
      position: relative;
      height: 100vh;
      }
      .content{
      position:absolute;
      top: 44px;
      bottom: 48px;
      left: 0px;
      right: 0px;
      }

      .fixed{
       position: fixed;
       top: 44px;
       left: 0px;
       right: 0px;

      }
.tabControl{
margin-top: 44px;

}
</style>
